<div class="tpl-right-bar">
    <div class="tpl-right-bar-show">
        <div class="tpl-card">
            <div class="tpl-card-head">配色方案</div>
            <div class="tpl-card-body">
                <ul class="theme-list">
                    <li class="theme-item" theme-id="1">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444444"></div>
                        <div class="theme-side" style="background-color: #20222A" bg="#20222A" color="rgba(255,255,255,.8)">
                            <div class="theme-logo" style="background-color: #20222A" bg="#20222A" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="2">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444444"></div>
                        <div class="theme-side" style="background-color: #50314F" bg="#50314F" color="rgba(255,255,255,.8)">
                            <div class="theme-logo" style="background-color: #50314F" bg="#50314F" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="3">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                        <div class="theme-side" style="background-color: #333f58" bg="#333f58" color="rgba(255,255,255,.8)">
                            <div class="theme-logo" style="background-color: #1E9FFF" bg="#1E9FFF" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="4">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                        <div class="theme-side" style="background-color: #2e9688" bg="#2e9688" color="rgba(255,255,255,.8)">
                            <div class="theme-logo" style="background-color: #2e9688" bg="#2e9688" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="5">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                        <div class="theme-side" style="background-color: #20222a" bg="#20222a" color="rgba(255,255,255,.8)">
                            <div class="theme-logo" style="background-color: #f78400" bg="#f78400" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="6">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                        <div class="theme-side" style="background-color: #242d38" bg="#242d38" color="rgba(255,255,255,.8)">
                            <div class="theme-logo" style="background-color: #AA3130" bg="#AA3130" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="7">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                        <div class="theme-side" style="background-color: #20222a" bg="#20222a" color="rgba(255,255,255,.8)">
                            <div class="theme-logo" style="background-color: #3A3D49" bg="#3A3D49" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="8">
                        <div class="theme-head" style="background-color: #2F9688" bg="#2F9688" color="#ffffff"></div>
                        <div class="theme-side" style="background-color: #20222a" bg="#20222a" color="rgba(255,255,255,.8)">
                            <div class="theme-logo" style="background-color: #226A62" bg="#226A62" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="9">
                        <div class="theme-head" style="background-color: #393d49" bg="#393d49" color="#ffffff"></div>
                        <div class="theme-side" style="background-color: #20222a" bg="#20222a" color="rgba(255,255,255,.8)">
                            <div class="theme-logo" style="background-color: #20222a" bg="#20222a" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="10">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#4f4f4f"></div>
                        <div class="theme-side" style="background-color: #ad5fcf" bg="#ad5fcf" color="rgba(255,255,255,.8)">
                            <div class="theme-logo" style="background-color: #20222A" bg="#20222A" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="11">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                        <div class="theme-side" style="background-color: #20222A" bg="#20222A" color="#b91a1a">
                            <div class="theme-logo" style="background-color: #20222A" bg="#20222A" color="#b91a1a"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="12">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#444"></div>
                        <div class="theme-side" style="background-color: #0a5541" bg="#0a5541" color="#eda438">
                            <div class="theme-logo" style="background-color: #20222A" bg="#20222A" color="rgba(255,255,255,.8)"></div>
                        </div>
                    </li>
                    <li class="theme-item" theme-id="13">
                        <div class="theme-head" style="background-color: #ffffff" bg="#ffffff" color="#626262"></div>
                        <div class="theme-side" style="background-color: #f44336" bg="#f44336" color="#fbfbfb">
                            <div class="theme-logo" style="background-color: #f44336" bg="#f44336" color="#fbfbfb"></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
</div>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/app.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts.min.js"></script>
<script>
    myChart = echarts.init(document.getElementById("main"));
    option = {
        title: {
            text: '访问来源'
        },
        tooltip : {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                boundaryGap : false,
                data : ['周一','周二','周三','周四','周五','周六','周日']
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : [
            {
                name:'邮件营销',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[120, 132, 101, 134, 90, 230, 210]
            },
            {
                name:'联盟广告',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'视频广告',
                type:'line',
                stack: '总量',
                areaStyle: {},
                data:[150, 232, 201, 154, 190, 330, 410]
            },
            {
                name:'直接访问',
                type:'line',
                stack: '总量',
                areaStyle: {normal: {}},
                data:[320, 332, 301, 334, 390, 330, 320]
            },
            {
                name:'搜索引擎',
                type:'line',
                stack: '总量',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                areaStyle: {normal: {}},
                data:[820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    myChart.setOption(option);
</script>
</body>
</html>